import * as React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
} from 'react-native';

import API from '../../api/index'
import RowItem from '../../baseUI/row-item';
import BText from '../../baseUI/b-text';
import BLine from '../../baseUI/b-line';

export default class Chat extends React.Component {
  state = {
    detail: null
  }

  componentDidMount() {
    const id = this.props.route.params.projectId
    this.props.navigation.setOptions({ tabBarVisible: false })
    API.projectDetail(id).then(res => {
      this.setState({
        detail: res.data
      })
    })
  }

  render() {
    const { detail } = this.state;
    if (!detail) {
      return <View>
        <Text>...</Text>
      </View>
    }

    return (
      <View style={{ flex: 1}}>
        <ScrollView>
          {/* 基本信息 */}
          <View style={{
            backgroundColor: '#fff',
            paddingHorizontal: 12
          }}>
            <Text style={{
              fontSize: 16,
              color: '#000',
              lineHeight: 50,
              fontWeight: '600',
            }}>{detail.title}</Text>
            <RowItem label="需求预算" value={'¥' + (detail.reward / 100)}></RowItem>
            <RowItem label="技能要求" value={detail.requires}></RowItem>
            <RowItem label="发布日期" value={detail.createTime}></RowItem>
            <RowItem label="截止日期" value={detail.updateTime || '无要求'}></RowItem>
            <View style={styles.d_item_footer}>
              <View style={[styles.flex, styles.flex_auto]}>
                <Image style={styles.d_item_avatar} source={{ uri: detail.userInfo.avatar }}></Image>
                <BText type="gray">{detail.userInfo.nickname}</BText>
              </View>
              <View style={styles.flex}>
                <BText type="gray">0人报名</BText>
              </View>
            </View>
          </View>

          {/* 描述详情 */}
          <View style={{ backgroundColor: '#fff', marginTop: 8 }}>
            <View style={{
              height: 40,
              display: 'flex',
              flexDirection: 'row',
              paddingHorizontal: 12,
              alignItems: 'center'
            }}>
              <BText style={{ fontSize: 14, fontWeight: '700' }}>需求描述</BText>
            </View>
            <BLine></BLine>
            <View style={{ padding: 10 }}>
              <BText type="second" style={{}}>{detail.description}</BText>
            </View>
          </View>
          
          {/* 投标列表 */}
          <View style={{ backgroundColor: '#fff', marginTop: 8 }}>
            <View style={{
              height: 40,
              display: 'flex',
              flexDirection: 'row',
              paddingHorizontal: 12,
              alignItems: 'center'
            }}>
              <BText style={{ fontSize: 14, fontWeight: '700' }}>投标列表</BText>
            </View>
            <BLine></BLine>
            <View style={{ padding: 10 }}>
              <BText type="second" style={{}}>{detail.description}</BText>
            </View>
          </View>

        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  flex_auto: {
    flex: 1
  },
  d_item_body: {
  },
  d_item_avatar: {
    width: 28,
    height: 28,
    borderRadius: 14,
    marginRight: 8
  },
  d_item_footer: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: "space-between",
    marginTop: 10,
    height: 50,
    borderTopWidth: 1,
    borderTopColor: '#f5f5f5'
  },
})